<template>
  <div class="jieriwenhua base-background-img">
    <div class="m1">
      <a :href="url + '/magic/jieriwenhua/duanwujie/index.html'">
        <img src="~@/assets/magic/jieriwenhua/duanwujie.png">
      </a>
    </div>
    <div class="m2">
      <a :href="url + '/magic/jieriwenhua/chunjie/index.html'">
        <img src="~@/assets/magic/jieriwenhua/chunjie.png">
      </a>
    </div>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'jieriwenhua',
    data () {
      return {
        url: STATICPATH
      }
    },
    mounted () {
      var links = document.querySelectorAll('a')
      Array.prototype.forEach.call(links, function (links) {
        links.addEventListener('click', function (evt) {
          evt.preventDefault()
          console.log(this)
          console.log(this.href)
          if (this.href.slice(0, 16) === 'http://127.0.0.1') {
            console.log(this.href)
            const BrowserWindow = require('electron').remote.BrowserWindow
            BrowserWindow.showDevTools = false
            let win = new BrowserWindow({
              width: 1280,
              height: 720,
              webPreferences: {
                nodeIntegration: false
              },
              show: false,
              backgroundColor: '#2e2c29'
            })
            win.setFullScreen(true)
            win.loadURL(this.href)
            win.once('ready-to-show', () => {
              win.show()
            })
          } else {
            console.log('======')
            window.location.href = this.href
          }
        })
      })
    }
  }
</script>

<style scoped>
.jieriwenhua > div {
  position: absolute; 
}
img {
  width: 100%;
  height: 100%;
}
.m1, .m2 {
  top: 270px;
  width: 170px;
  height: 180px;
}
.m1 {
  left: 400px;
}
.m2 {
  left: 750px;
}
</style>
